fix(search): adjust icon and hover styles on Close16 button for Chrome's new autofill color #4891
Conversation
ghost
requested review from
abbeyhrt
changed the title
|
Deploy preview for the-carbon-components ready! Built with commit dfb10a0 https://deploy-preview-4891--the-carbon-components.netlify.com |
|
Deploy preview for carbon-components-react ready! Built with commit dfb10a0 https://deploy-preview-4891--carbon-components-react.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit dfb10a0 |
|
Deploy preview for the-carbon-components ready! Built with commit 48820df https://deploy-preview-4891--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 48820df |
|
Deploy preview for carbon-components-react failed. Built with commit 48820df https://app.netlify.com/sites/carbon-components-react/deploys/5dfa8ce069f83f000736b394 |
| } | ||
|
|
||
| .#{$prefix}--search-input:-webkit-autofill ~ .#{$prefix}--search-close:hover { | ||
| background-color: #e5e5e5; |
There was a problem hiding this comment.
Is it OK to make this non-themeable? Also, is there really no way to override :-webkit-autofill? Some sites seem to suggest adding box-shadow to override the color.
There was a problem hiding this comment.
There is! I wasn't sure if we would want to remove the autofill indicator or style around it, I wanted to propose a solution so designers could weigh in on the preferred workaround
There was a problem hiding this comment.
I see, thank you for explaining @abbeyhrt - It'll be a good discussion to see it with designers wrt what the (themable) background color of such state should be.
There was a problem hiding this comment.
For this specific solution, I think the autofill replacement background color might need to use the hex value since if you use any of the hover tokens, for example $hover-field it will look like this:
which is too dark, i think. Since this only affects when the chrome autofill color is there, it shouldn't have any greater impact on the themes. I'm down to try other things though! This is just what I came up with when looking for a solution 🙂
|
This can be a hard problem to reproduce so here are some videos showing the current problem and the visual solution from this PR!
Proposed solution:
|
|
I think maybe search shouldn't have the browser auto-fill feature turned on. I've been trying to think of a use-case for search where a user would need this. With @connor-leech's search pattern work, type ahead and recently searched items would be a part of the component itself. I think auto-fill is more useful for forms elements. |
|
In general I think if the component has (or could have) its own menu we should avoid auto complete features because the auto complete can cover up functionality in the component, like here in data picker. And to my knowledge there's no easy way to dismiss the auto-complete.
|
|
@aagonzales That makes sense to me! I removed the style changes and turned the autocomplete off for the search input 👍 |
|
Thanks folks! |
…e's new autofill color (carbon-design-system#4891)
Closes #4808
Chrome's new sky blue autofill color makes
Close16in the Search component disappear for the dark themes and there is a very visible black line:This PR makes it so the icon is visible when this autofill color is used with a vendor prefix and adjusts the hover color. I used the hex value from the light themes from
$hover-fieldinstead of the token because I didn't want to the dark theme's color to apply here. With this change, this is what the hover on the cancel button looks like in dark theme with Chome's autofill color present:Changelog
New
Removed
::beforestyle block to remove the black line between the input and the close button, seems like it was there for custom button support which is now deprecated. (fix(search): add styles for custom search buttons #3247)Testing / Reviewing
Designers: I'm not sure if this is how we want to solve this problem! There are a couple different things we can do and this is just one implementation, let me know if you want the hover color to be different or if we want to go with a different approach